<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      right-text="注册"
      @click-right="onClickRight"
    />
    <div class="content">
      <div class="login-con">
        <div class="login-info">
          <input type="text" v-model="userName" placeholder="请输入用户名">
        </div>
        <div class="login-info">
          <input type="password" v-model="password" placeholder="请输入密码">
        </div>
      </div>
      <div class="other-login">
        <router-link :to="{name: 'forgetPass'}" tag="span">忘记密码</router-link>
        <router-link :to="{name: 'phoneLogin'}" tag="span">使用手机短信登录</router-link>
      </div>
      <div class="submit">
        <button type="submit" class="submit-btn" @click="signin">登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { NavBar, Toast } from "vant";
import { login } from "../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      userName: "",
      password: ""
    };
  },
  created(){
    // console.log(this.getCookies('name'))
    //   if(this.getCookies('name')){
    //       this.userName = this.getCookies('name');
    //   }
    //   if(this.getCookies('pass')){
    //       this.password = this.getCookies('pass');
    //   }
  },
  watch:{
     
  },
  methods: {
    //进入注册页
    onClickRight() {
      this.$router.push("/register");
    },
    signin() {
      console.log(document.cookie)
      let userInfo = new URLSearchParams();
      userInfo.append("userName", this.userName);
      userInfo.append("password", this.password);
      userInfo.append("type", "0");
      login(userInfo)
        .then(res => {
          console.log(res.data);
          if (res.data.code != 200) {
            this.$toast(res.data.msg);
            sessionStorage.setItem("getUser", res.data.data.userName);
            sessionStorage.setItem("setToken", res.data.data.token);
          } else {
            axios.defaults.headers.Authorization = res.data.data.token;
            console.log(res.data,88888)
            this.setCookies("setToken",res.data.data.token);
            this.setCookies("pass",this.password);
            this.setCookies("name",this.userName);
            this.setCookies("yaoqCode",res.data.data.invitationCode);
            // 认证
            this.setCookies("cardId",res.data.data.idCardIds);
            //交易密码设置判断  
            this.setCookies("tradePassword",res.data.data.tradePassword);
            this.$store.commit("setToken", res.data.data.token);
            this.$store.commit("getUser", res.data.data.userName);
            this.$store.commit("changeLogin", true); //登录后改变登录状态 isLogin = true
            this.$toast(res.data.msg);
            this.$router.push({ name: "mine" }); //this.$route.query.redirect
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //保存信息
    setCookies(loginName,loginInfo) {
      window.localStorage.setItem(loginName, loginInfo)
    },
    //获取信息
    getCookies(logininfo) {
      return window.localStorage.getItem(logininfo);
    }

  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.login {
  background: #fff;
  .content {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    .login-con {
      width: 100%;
      background: #fff;
      .login-info {
        width: 100%;
        box-sizing: border-box;
        line-height: 24px;
        background-color: #fff;
        color: #969799;
        font-size: 14px;
        & > input {
          display: flex;
          padding: 10px 15px;
          width: 91.6%;
          border: 0;
          border-bottom: 1px solid #ebedf0;
        }
      }
    }
    .other-login {
      display: flex;
      margin-top: 15px;
      & > span {
        flex: 1;
        display: inline-block;
        text-align: left;
        font-size: @base_textSize;
        color: @base_textColor;
      }
      span:last-child {
        text-align: right;
      }
    }
    .submit {
      margin-top: 0.67rem;
      width: 100%;
      background-color: #fff;
      color: #fff;
      font-size: @base_textSize;
      .submit-btn {
        width: 90%;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 10vh auto 0;
    border: 0;
      }
    }
  }
}
</style>